<template>
  <div class="industry-finance-container" >
    <industry-banner titleText="产业金融" subtitleText="区块链+供应链金融服务平台为企业提供优质场景化解决方案"></industry-banner>

    <!-- 第一部分：三个白色背景的tag -->
    <div class="section-one">
      <div class="tag-container">
        <div class="tag-item" v-for="(item, index) in tags" :key="index">
          <img :src="item.icon" class="tag-icon">
          <div class="tag-title">{{ item.title }}</div>
          <div class="tag-desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>

    <!-- 第二部分：应用场景 -->
    <div class="section-two">
      <div class="section-title">应用场景</div>
      <div class="section-subtitle">对行业深入分析，我们已落地了一些方案</div>

      <!-- 第一行：两个正方形 + 一个长方形 -->
      <div class="scenario-row">
        <div class="square-item zf-bg"  >
          <img src="@/assets/industrySynergy/jr.svg" class="scenario-icon">
          <div class="scenario-text">应收账款</div>
        </div>
        <div class="square-item blue-bg">
          <img src="@/assets/industrySynergy/zczj.svg" class="scenario-icon">
          <div class="scenario-text">资产证券化</div>
        </div>
        <div class="rectangle-item">
          <img src="@/assets/industrySynergy/yzmy.svg" class="scenario-icon">
          <div class="scenario-text">转口贸易服务</div>
        </div>
      </div>

      <!-- 第二行：两个长方形 -->
      <div class="scenario-row">
        <div class="half-rectangle-item xxgx-one" >
          <img src="@/assets/industrySynergy/xxgx.svg" class="scenario-icon">
          <div class="scenario-text">KYC信息共享</div>
          <div class="description-text">
            解决了银行异业间对数据求而难得、享而不能的难题。保护信息提供商的回忆机构数据隐私安全，
            信息共享自动化、智能化；提升银行间市场风险防范能力，打造行业标准
          </div>
        </div>
        <div class="half-rectangle-item cyan-bg">
          <img src="@/assets/industrySynergy/jr.svg" class="scenario-icon">
          <div class="scenario-text">银政互联金融综合服务</div>
        </div>
      </div>

    </div>
    <div class="full-width-banner">
      <div class="banner-content">
        <div class="banner-text">
          <div class="banner-title">金融服务轻松享受</div>
          <div class="banner-subtitle">为您的企业配置场景化供应链金融服务</div>
          <div class="banner-desc">携手银行联合建模挖掘数据价值，帮助企业经营数据价值化</div>
          <button class="consult-btn">立即咨询</button>
        </div>
      </div>
    </div>

    <!-- 新增第二部分：产品金融是什么 -->
    <div class="section-three">
      <div class="section-title">产品金融是什么</div>
      <div class="feature-container">
        <div class="feature-item" v-for="(item, index) in features" :key="index">
          <img :src="item.icon" class="feature-icon">
          <div class="feature-title">{{ item.title }}</div>
          <div class="feature-desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>

    <!-- 新增第三部分：场景化需求 -->
    <div class="section-four">
      <div class="section-title">场景化需求下，选择适合您的服务方案</div>
      <!-- 这里可以添加具体内容 -->
    </div>
    <!-- Content Section -->
    <div class="about-content">

      <div class="content-row">
        <!-- Left Section -->
        <div class="left-section">
          <h2>平台资金清分服务方案</h2>
          <p class="left-text">
            <span >采用银联商务成熟B2B网银支付模式，为平台提供合格、专业、安全的产品服务体系，实现线上支付、资金清算、对账报表等主要功能，凭借丰富的资金合规分账解决方案经验，精确匹配分账业务场景诉求，为平台保驾护航。</span>
          </p>
          <p class="left-text">
            相关产品
          </p>
          <p class="left-text">
            相关产品    设备按揭     数据贷     租赁贷
          </p>
          <el-button type="primary">了解方案详情</el-button>
        </div>

        <!-- Right Section -->
        <div class="right-section">


          <div class="right-item">
            <img src="@/assets/industrySynergy/ptzj.jpg" alt="Company Image" class="company-image">
          </div>

        </div>
      </div>
      <div class="additional-section">
        <div class="content-row">
          <!-- Left Section - Image -->
          <div class="left-image-section">
            <img src="@/assets/industrySynergy/zxgyl.png" alt="Company Image" class="company-image">
          </div>

          <!-- Right Section - Text -->
          <div class="left-section">
            <h2>在线供应链服务方案</h2>
            <p class="left-text">
              <span >为各企业方提供收、付、结算一体的平台账号解决方案，助力企业经营所需物质、货源采购服务信息化升级。提高订单支付转化率、提高收款效率
              、降低人工成本投入帮助供应商经营数据价值化。</span>
            </p>
            <p class="left-text">
              相关产品
            </p>
            <p class="left-text">
              相关产品    设备按揭     数据贷     租赁贷
            </p>
            <el-button type="primary">了解方案详情</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="section-three">
      <div class="section-title">服务优势</div>
      <div class="tag-container" style=" background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
        <div class="tag-item" v-for="(item, index) in fwysList" :key="index">
<!--          <img :src="item.icon" class="tag-icon">-->
          <div class="tag-title">{{ item.title }}</div>
          <div class="tag-desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
    <contact-footer></contact-footer>
  </div>
</template>

<script>
import IndustryBanner from "@/view/productEmpowerment/model/productNavbar.vue";
import ContactFooter from "@/view/homeComponents/banner.vue";

export default {
  components: {
    ContactFooter,
    IndustryBanner
  },
  data() {
    return {
      fwysList: [
        {
          icon: require("@/assets/industrySynergy/zdh.svg"),
          title: "成立服务专班",
          desc: "成立服务专班，实行一把手负责制，分行行长、分管行长和各相关部门参与并及时解决平台需求"
        },
        {
          icon: require("@/assets/industrySynergy/qrs.svg"),
          title: "绿色通道",
          desc: "为平台及所有用户开设“绿色通道”，在结算、融资、个人业务等各方面优先办理"
        },
        {
          icon: require("@/assets/industrySynergy/qcj.svg"),
          title: "专门的客户经理",
          desc: "配备专门的客户经理和产品经理，提供全方位、多层次的一揽子金融服务，确保服务的有机统一和快速反应"
        }
      ],
      features: [
        {
          icon: require("@/assets/industrySynergy/zdh.svg"),
          title: "自动化、智能化支付体系",
          desc: "结合合规性、持续性的要求、实现线上支付、资金清算、对账"
        },
        {
          icon: require("@/assets/industrySynergy/qrs.svg"),
          title: "嵌入式金融服务",
          desc: "提供京信链、京采贷、京销贷、京仓贷等全产业链融资服务"
        },
        {
          icon: require("@/assets/industrySynergy/qcj.svg"),
          title: "全场景多态融合",
          desc: "连接企业的财务、营销、供应链全场景，构建强融合能力的模型"
        }
      ],
      tags: [
        {
          icon: require("@/assets/industrySynergy/xxqh.svg"),
          title: "信息强化，监管治理",
          desc: "在保障交易信息、资产信息和资金信息的可靠性的同时，有效提升风控能力和金融监管能力。在监管机构部署节点，促进全链条信息共享。"
        },
        {
          icon: require("@/assets/industrySynergy/xxgx2.svg"),
          title: "信息强化，打破壁垒",
          desc: "信息交换过程中进行增信，降低业务对中间方的依赖。冠军信息上链，多方共识，解决中心化系统、跨机构、跨平台协同出现的“信息孤岛”"
        },
        {
          icon: require("@/assets/industrySynergy/xxcx.svg"),
          title: "产品创新，业务重塑",
          desc: "基于区块链在承揽承做业务、信贷等场景中形成全新协同方式。同时智能合约将提升业务各环节的自动化，改善处理精确度和效率。"
        }
      ]
    }
  }
}
</script>

<style scoped>
/* 添加遮罩的样式 */
.zf-bg,
.rectangle-item,
.half-rectangle-item {
  position: relative;
  z-index: 1;
}

.zf-bg::before,
.rectangle-item::before,
.half-rectangle-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* 黑色半透明遮罩，0.4是透明度 */
  z-index: -1;
  border-radius: inherit; /* 继承父元素的圆角 */
}

/* 确保文字内容在遮罩上方 */
.scenario-text,
.description-text {
  position: relative;
  z-index: 2;
}

/* 保持原有样式不变 */
.industry-finance-container {

}

.section-one {
  background-color: #ffffff;
  padding: 40px 0;
}

.tag-container {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 30px;
}

.tag-item {

  border-radius: 8px;
  padding: 30px;
  text-align: center;
  width: 300px;

}

.tag-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  object-fit: contain;
}

.tag-title {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  margin-bottom: 15px;
}

.tag-desc {
  font-size: 14px;
  color: #999;
  line-height: 1.6;
}

.section-two {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.section-title {
  font-size: 40px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 15px;
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 2px;
  background-color: #B4C8FA;
}

.section-subtitle {
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-bottom: 40px;
}

.scenario-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 20px;
}

.square-item, .rectangle-item, .half-rectangle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.square-item {
  width: calc(30% - 10px);
  aspect-ratio: 1/1;
  background-color: white;
}

.zf-bg {
  color: #ffffff;
  background-image: url('@/assets/industrySynergy/yszk.jpg');
  background-size: cover;
}

.blue-bg {
  background-color: #428DFB;
  color: white;
}

.rectangle-item {
  width: calc(60% - 10px);
  height: 300px;
  background-color: black;
  background-image: url('@/assets/about-us/Frame198.jpg');
  background-size: cover;
  color: white;
}

.half-rectangle-item {
  width: calc(48% - 10px);
  height: 200px;

  background-size: cover;
  color: white;
}
.xxgx-one{
  background-image: url('@/assets/industrySynergy/xxgx.jpg');
}
.xxgx-two{
  background-color: #28CAE6;
}
.cyan-bg {
  background-color: #28CAE6;
  color: white;
}

.scenario-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
}

.scenario-text {
  font-size: 28px;
  font-weight: bold;
}

.description-item {
  width: 48%;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-size: cover;
  color: white;
}

.description-text {
  font-size: 14px;
  color: inherit;
  line-height: 1.8;
  margin-top: 20px;
}

.empty-item {
  width: 48%;
}
.full-width-banner {
  height: 500px;
  background-image: url('@/assets/about-us/Frame7.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
}

.full-width-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.banner-content {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

.banner-text {
  max-width: 50%;
  color: white;
}

.banner-title {
  font-size: 40px;
  margin-bottom: 20px;
}

.banner-subtitle {
  font-size: 24px;
  margin-bottom: 15px;
  font-weight: 500;
}

.banner-desc {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.consult-btn {
  background-color: #428DFB;
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.consult-btn:hover {
  background-color: #3272D9;
}

/* 新增第二部分样式 */
.section-three {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.section-three .section-title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 50px;
}

.feature-container {
  display: flex;
  justify-content: space-between;
}

.feature-item {
  width: 30%;
  text-align: center;
  padding: 0 15px;
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 25px;
}

.feature-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.feature-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 新增第三部分样式 */
.section-four {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.section-four .section-title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 50px;
}
/* Content Styles */
.about-content {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
}

.content-row {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
}

.left-section {
  flex: 1;
  min-width: 300px;
  text-align: left;
}

.right-section {
  flex: 1;
  min-width: 300px;
  margin-left: 20px;
}

.left-section h2 {
  font-size: 30px;
  color: #333;
  margin-bottom: 20px;
}

.yellow-line {
  width: 100px;
  height: 2px;
  background-color: #f6b021;
  margin-bottom: 30px;
}

.left-text {
  color: #5a5a5a;
  font-size: 14px;
  line-height: 35px;
  text-align: left;
}

.bold-black {
  font-weight: bold;
  color: #000;
}

.blue-bold {
  color: #002E70;
  font-weight: bold;
}

/* Right Section Styles */
.right-item {
  display: flex;
  margin-bottom: 30px;
  align-items: flex-start;
}

.icon-container {
  flex-shrink: 0;
  margin-right: 20px;
  margin-top: 20px;
}

.item-icon {
  width: 60px;
  height: 60px;
}

.text-container {
  flex: 1;
  color: #5a5a5a;
  font-size: 14px;
  line-height: 35px;
  text-align: left;
}

.additional-section {
  margin-top: 20px;
  margin-bottom: 80px;
}

.left-image-section {
  flex: 1;
  min-width: 300px;
}

.company-image {
  width: 100%;
  max-width: 650px;
  height: auto;
  max-height: 450px;
  object-fit: contain;
  border-radius: 4px;
}

.right-text-section {
  flex: 1;
  min-width: 300px;
  margin-left: 60px;
}

.right-text-section h2 {
  font-size: 36px;
  color: #002E70;
  margin-bottom: 20px;
}

.right-text {
  color: #5a5a5a;
  font-size: 14px;
  line-height: 35px;
  text-align: left;
}
</style>